<%@ page import="org.ispider.Search"%>
<!doctype html>
<html>
<head>
<meta name="layout" content="bootstrap">
<g:set var="entityName"
	value="${message(code: 'search.label', default: 'Search')}" />
<title><g:message code="default.create.label"
		args="[entityName]" /></title>

<style>
.psmall {
	font-size: 16
}
</style>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<script
	src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>

<script type="text/javascript">
var fuzzyFacebookTime = (function(){
	 
	  fuzzyTime.defaultOptions={
	    // time display options
	    relativeTime : 48,
	    // language options
	    monthNames : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
	    amPm : ['AM', 'PM'],
	    ordinalSuffix : function(n) {return ['th','st','nd','rd'][n<4 || (n>20 && n % 10<4) ? n % 10 : 0]}
	  }
	 
	  function fuzzyTime (timeValue, options) {
	 
	    var options=options||fuzzyTime.defaultOptions, 
	        date=parseDate(timeValue),
	        delta=parseInt(((new Date()).getTime()-date.getTime())/1000),
	        relative=options.relativeTime,
	        cutoff=+relative===relative ? relative*60*60 : Infinity;
	 
	    if (relative===false || delta>cutoff)
	      return formatTime(date, options)+' '+formatDate(date, options);
	 
	    if (delta<60) return 'less than a minute ago';
	    var minutes=parseInt(delta/60 +0.5);
	    if (minutes <= 1) return 'about a minute ago';
	    var hours=parseInt(minutes/60 +0.5);
	    if (hours<1) return minutes+' minutes ago';
	    if (hours==1) return 'about an hour ago';
	    var days=parseInt(hours/24 +0.5);
	    if (days<1) return hours+' hours ago';
	    if (days==1) return formatTime(date, options)+' yesterday';
	    var weeks=parseInt(days/7 +0.5);
	    if (weeks<2) return formatTime(date, options)+' '+days+' days ago';
	    var months=parseInt(weeks/4.34812141 +0.5);
	    if (months<2) return weeks+' weeks ago';
	    var years=parseInt(months/12 +0.5);
	    if (years<2) return months+' months ago';
	    return years+' years ago';
	  }
	 
	  function parseDate (str) {
	    var v=str.replace(/[T\+]/g,' ').split(' ');
	    return new Date(Date.parse(v[0] + " " + v[1] + " UTC"));
	  }
	 
	  function formatTime (date, options) {
	    var h=date.getHours(), m=''+date.getMinutes(), am=options.amPm;
	    return (h>12 ? h-12 : h)+':'+(m.length==1 ? '0' : '' )+m+' '+(h<12 ? am[0] : am[1]);
	  }
	 
	  function formatDate (date, options) {
	    var mon=options.monthNames[date.getMonth()],
	        day=date.getDate(),
	        year=date.getFullYear(),
	        thisyear=(new Date()).getFullYear(),
	        suf=options.ordinalSuffix(day);
	 
	    return mon+' '+day+suf+(thisyear!=year ? ', '+year : '');
	  }
	 
	  return fuzzyTime;
	 
	}());

</script>
</head>
<body>

	<g:form action="searchSocial"  id="socialsearch">
		<%--<a id = "hi" href="#" rel="tooltip" title="first tooltip">hover over me</a>--%>
		<div>
			<div class="mydiv input-append formcenter ">
				<div class="marketing">
					<h3>Search anything on FaceBook and Twitter</h3>
				</div>
				<g:textField class="span6" placeholder="" name="socialq" value="${sval }" />

				<input value="Search" class="btn btn-success" name="sa" size="80"
					type="submit" id="submit" />
			</div>
		</div>
	</g:form>

	<g:each in="${fposts}" var="post">
		<div class="row">
			<div class="span1">
				<img align="right" src="${post.picture }" class="img-rounded">
			</div>
			<div class="span8">
				<div class="row">
					<div class="span8">

						<a href="${post.userURLString}"> ${post.fromUser}
						</a>
					</div>
					<div class="span8">
						<blockquote>
							<p id="textpost" style="font-size: 15px">
								${post.statusMessage}
							</p>

						</blockquote>
					</div>

					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i class="icon-facebook-sign">
					</i> &nbsp
					<g:link id="hi" title="first tooltip" href="${post.urlString}">
						<small></small>
						<i class="icon-external-link"> </i>
					</g:link>

					<small class="muted"> 
					<script type="text/javascript">
           				document.write(fuzzyFacebookTime("${post.createdTime}".replace(/-/g,'/'))
           				)
					</script>
					</small>

				</div>
			</div>
		</div>
		<hr>

	</g:each>

	<g:each in="${tposts}" var="post">
		<div class="row">
			<div class="span1">
				<img align="right" src="${post.picture }" class="img-rounded">
			</div>
			<div class="span8">
				<div class="row">
					<div class="span8">
						<a href="${post.userURLString}"> ${post.fromUser}
						</a>
					</div>
					<div class="span8">
						<blockquote>
							<p style="font-size: 15px">
								${post.text}
							</p>

						</blockquote>
					</div>

					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i class="icon-twitter-sign">
					</i> &nbsp<a id="hi" href="${post.urlString}"><small></small><i
						title="Go to external link" class="icon-external-link"> </i></a> <small
						class="muted">${post.createdTime}
						 
					</small>

				</div>
			</div>
		</div>
		<hr>

	</g:each>

	
</body>
</html>
